<template>
  <div class="JNPF-common-layout">
    <JNPF-table :data="list" :hasNO="false" class="recordListTable" height="100%">
      <el-table-column prop="nodeName" label="节点名称" show-overflow-tooltip width="200">
        <template slot-scope="scope">
          <!-- <el-link type="primary" :underline="false" @click="handelNodeDetail(scope.row)">{{scope.row.nodeName}}</el-link> -->
          {{ scope.row.nodeName }}
        </template>
      </el-table-column>
      <el-table-column prop="userName" label="操作人员" width="150" />
      <el-table-column prop="creatorTime" label="接收时间" width="140" :formatter="jnpf.tableDateFormat" />
      <el-table-column prop="handleTime" label="操作时间" width="140" :formatter="jnpf.tableDateFormat" />
      <el-table-column prop="handleStatus" label="执行动作" width="200" show-overflow-tooltip>
        <template slot-scope="scope">
          <div class="item">
            <span :style="{background:colorList[scope.row.handleStatus||0]}"></span>
            {{statusList[scope.row.handleStatus||0]}}
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="signImg" label="签名" width="120" align="center">
        <template slot-scope="scope">
          <el-image v-if="scope.row.signImg" style="width: 80px" :src="scope.row.signImg" :preview-src-list="[scope.row.signImg]">
          </el-image>
        </template>
      </el-table-column>
      <el-table-column prop="fileList" label="附件" width="200" align="center">
        <template slot-scope="scope">
          <div v-for="(file,index) in JSON.parse(scope.row.fileList)" :key="index" @click="handlePreview(file)">
            <el-link type="primary" :underline="false">{{file.name}}</el-link>
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="handleOpinion" label="备注" min-width="200" show-overflow-tooltip />
      <el-table-column prop="handleOpinion" label="事件日志" width="100">
        <template slot-scope="scope">
          <template v-if="scope.row.isLog">
            <el-link type="primary" :underline="false" @click="handelNodeLog(scope.row)">
              查看日志</el-link>
          </template>
        </template>
      </el-table-column>
    </JNPF-table>
    <Preview :visible.sync="previewVisible" :file="activeFile" :showDownload="true" />
    <FormBox v-if="formVisible" ref="FormBox" @close="formVisible = false" />

  </div>
</template>
<script>
  import Preview from '@/components/Jnpf/Upload/Preview'
  import FormBox from '../components/FormBox'

  export default {
    components: { Preview, FormBox },
    props: {
      list: { type: Array, default: [] },
      endTime: { type: Number, default: 0 },
      flowId: { type: String, default: '' },
      opType: { type: Number, default: 0 }
    },
    name: 'recordList',
    data() {
      return {
        colorList: ['rgba(242,68,68,0.39)', 'rgba(35,162,5,0.39)', 'rgba(0,0,255,0.39)', 'rgba(21,21,157,0.39)',
          'rgba(186,33,33,0.39)', 'rgba(25,185,185,0.39)', 'rgba(50,191,61,0.39)', 'rgba(49,151,214,0.39)',
          'rgba(185,123,6,0.39)', 'rgba(45,94,186,0.39)', 'rgba(50,191,61,0.39)', 'rgba(255,0,0,0.39)',
          'rgba(0,128,0,0.39)', 'rgba(0,128,0,0.38)',
          'rgba(0,128,0,0.37)', 'rgba(0,128,0,0.36)', 'rgba(0,128,0,0.35)',
          'rgba(0,128,0,0.34)', 'rgba(0,128,0,0.33)', 'rgba(0,128,0,0.32)',
          'rgba(0,128,0,0.31)', 'rgba(0,128,0,0.30)', 'rgba(0,128,0,0.29)', 'rgba(0,128,0,0.28)', 'rgba(0,128,0,0.28)',
          'rgba(0,128,0,0.34)', 'rgba(0,128,0,0.33)', 'rgba(0,128,0,0.32)'
        ],
        statusList: [
          '退回', '同意', '发起', '撤回', '终止', '指派', '后加签', '转办', '变更', '复活', '前加签', '挂起',
          '恢复', '审批人为空自动通过',
          '审批人为空自动驳回', '审批人和发起人相同自动通过', '审批人审批过自动通过',
          '相邻节点审批人相同自动通过', '进行中', '委派',
          '委派人完成', '任务完成', '流程结束', '节点撤回', '不同意', '弃权', '锁定', '协办'

        ],
        previewVisible: false,
        formVisible: false,
        activeFile: {},
        logVisible: false
      }
    },
    methods: {
      handlePreview(file) {
        this.activeFile = file
        this.previewVisible = true
      },
      handelNodeDetail(item) {
        let data = {
          id: item.taskId,
          taskNodeId: item.taskNodeId,
          enCode: item.flowCode,
          flowId: this.flowId,
          formType: item.formType,
          opType: 0,
          status: item.status,
          title: item.nodeName
        }
        this.formVisible = true
        this.$nextTick(() => {
          this.$refs.FormBox.init(data)
        })
      },
      handelNodeLog(item) {
        this.$emit('handelNodeLog', item)
      }
    }
  }
</script>
<style lang="scss" scoped>
  .recordListTable {
    .el-link {
      font-size: 12px;
    }
    .item {
      display: flex;
      align-items: center;
      width: 100%;
      span {
        width: 7px;
        height: 7px;
        margin-right: 6px;
        margin-bottom: 1px;
        border-radius: 50%;
        flex-shrink: 0;
      }
    }
    .signImg {
      width: 80px;
      cursor: pointer;
    }
  }
</style>
